<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/iconfont/iconfont.css">
  <link rel="stylesheet" href="./assets/css/dashboard.css">
</head>

<body>
  <h1>Dashboard</h1>
  <div class="main">
    <div class="row">
      <div class="overview">
        <div class="panel item">
          <h4>班级人数</h4>
          <!-- <div class="total">84</div> -->
          <div class="total"></div>
        </div>
        <div class="panel item">
          <h4>期望薪资</h4>
          <!-- <div class="avgSalary">14,378</div> -->
          <div class="avgSalary"></div>

        </div>
        <div class="panel item">
          <h4>平均年龄</h4>
          <!-- <div class="avgAge">22.78</div> -->
          <div class="avgAge"></div>

        </div>
        <div class="panel item">
          <h4>男女比例</h4>
          <!-- <div class="proportion">1.1</div> -->
          <div class="proportion"></div>
        </div>
      </div>
      <div class="panel line">
        line
      </div>
    </div>
    <div class="row">
      <div class="panel bar">
        <div class="title">
          <h2>成绩 Score</h2>
          <ul id="batch">
            <li index=1><a href="javascript:;">第1次成绩</a></li>
            <li index=2><a href="javascript:;">第2次成绩</a></li>
            <li index=3><a href="javascript:;">第3次成绩</a></li>
            <li index=4><a href="javascript:;">第4次成绩</a></li>
            <li index=5><a href="javascript:;">第5次成绩</a></li>
          </ul>
        </div>
        <div class="barChart">hahahah</div>
      </div>
    </div>
    <div class="row">
      <div class="panel map">xxx</div>
      <div class="panel pie">yyy</div>
    </div>
  </div>

  <script src="./assets/lib/echarts/echarts.min.js"></script>
  <script src="./assets/lib/echarts/china.js"></script>
  <script src="./assets/lib/jquery-3.6.0.min.js"></script>
  <script src="./assets/lib/axios.js"></script>

  <script src="./assets/utils/request.js"></script>
  <script>
    // **************************************************** 班级概览、概况
    axios
      .get('/student/overview')
      .then(({
        data: res
      }) => {
        if (res.code === 0) {
          $('.overview .total').text(res.data.total);
          $('.overview .avgSalary').text(res.data.avgSalary);
          $('.overview .avgAge').text(res.data.avgAge);
          $('.overview .proportion').text(res.data.proportion);
        }
      })

    // **************************************************** 获取柱状图数据

    // 2. 点击 “每一次成绩” 按钮，获取当前这次成绩，并把数据应用到柱状图中
    $('#batch li').on('click', function() {
      // 获取点击的是哪一个li
      let batch = $(this).attr("index");

      axios
        .get('/score/batch', {
          params: {
            batch
          }
        }).then(({
          data: res
        }) => {
          // console.log(res);
          if (res.code === 0) {
            barChart(res.data);
          }
        })
    })

    // 为了让一开始有一次数据，触发一下 "第一次成绩" 按钮的单击事件
    $('#batch li').eq(0).trigger('click');



    // **************************************************** 获取学生信息
    axios
      .get('/student/list')
      .then(({
        data: res
      }) => {
        // console.log(res);
        if (res.code === 0) {
          // 整理折线图使用的数据
          let lineData = {
            name: [],
            salary: [],
            truesalary: []
          };



          // 整理饼图的数据
          let obj = {};

          res.data.forEach(item => {
            // 处理折线图数据
            lineData.name.push(item.name);
            lineData.salary.push(item.salary);
            lineData.truesalary.push(item.truesalary);


            // 处理饼图数据
            let key = item.province;
            if (obj[key] == undefined) {
              obj[key] = 1;
            } else {
              obj[key]++;
            }

          })

          // 整理好数据
          lineChart(lineData);

          let arr = []
          for (const key in obj) {
            arr.push({
              name: key,
              value: obj[key]
            })
          }
          pieChart(arr);

        }
      })



    // ***************************************************************** 饼图 
    function pieChart(arr) {
      let myChart = echarts.init($('.pie')[0]);

      let option = {
        tooltip: {
          // {a} 表示series中的name
          // {b} 表示数据中的series.data中的name
          // {c} 表示每一项的值
          // {d} 表示百分比
          formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
        },
        title: {
          text: '籍贯 Hometown',
          textStyle: {
            color: '#6d767e'
          },
        },
        series: [{
          name: '各地人员分布',
          type: 'pie', // pie 表示饼图
          radius: ['10%', '65%'], // 内外圈的半径
          center: ['50%', '50%'], // 中心点
          roseType: 'area', // area表示面积模式，radius表示半径模式
          itemStyle: { // 每一项的设置
            borderRadius: 4, // 扇形边缘圆角设置
          },
          data: arr
        }]
      };

      myChart.setOption(option)
    }



    // ***************************************************************** 柱状图 
    function barChart({
      avgScore,
      group,
      gt60,
      lt60,
      gt80
    }) {
      let myChart = echarts.init($('.barChart')[0]);
      let option = {
        // 网格（整个图表区域设置）
        grid: {
          top: 40,
          bottom: 30,
          left: '7%',
          right: '7%'
        },
        // 鼠标移入的提示
        tooltip: {
          trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
          axisPointer: { // 坐标轴指示器配置项
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // 图例
        legend: {},
        // X轴
        xAxis: [{
          type: 'category',
          data: group,
          axisPointer: {
            type: 'shadow'
          }
        }],
        // Y轴
        yAxis: [{
          type: 'value',
          min: 0, // y轴数据最小值
          max: 100, // y轴数据最大值
          interval: 10, // step步长，把y轴的数据分成多少份
          axisLabel: { // Y轴文字设置
            formatter: '{value}分', // Y轴文字
          }
        }, {
          type: 'value',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value}人'
          }
        }],
        // 数据部分（4组数据）
        series: [{
          name: '平均分',
          type: 'bar',
          data: avgScore,
          barWidth: '15',
        }, {
          name: '低于60分人数',
          type: 'bar',
          data: lt60,
          barWidth: '15',
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        }, {
          name: '60到80分之间',
          type: 'bar',
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
          barWidth: '15',
          data: gt60
        }, {
          name: '高于80分人数',
          type: 'bar',
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
          barWidth: '15',
          data: gt80
        }]
      };
      myChart.setOption(option);
    }


    // ***************************************************************** 折线图 
    function lineChart({
      name,
      salary,
      truesalary
    }) {
      let myChart = echarts.init($('.line')[0]);
      let option = {
        // 图例
        legend: {
          top: 20,
        },
        // 鼠标移入的提示
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%'];
          }
        },
        // 标题
        title: {
          text: '薪资 Salary',
          textStyle: {
            color: '#6d767e'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: name,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '50%']
        },
        // 数据缩放组件
        dataZoom: [
          // {
          //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
          //   start: 0,
          //   end: 10
          // },
          {
            type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
            start: 0, // 拖动滑块起始位置（这是一个百分比）
            end: 15 // 拖动滑块结束位置（这是一个百分比）
          }
        ],
        // 数据部分
        series: [{
          name: '期望薪资',
          type: 'line',
          smooth: true, // 表示使用平滑曲线
          symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
          itemStyle: { // 单独控制这条线的颜色
            color: '#ee6666'
          },
          data: salary,
        }, {
          name: '实际薪资',
          type: 'line',
          smooth: true,
          symbol: 'none',
          itemStyle: { // 单独控制这条线的颜色
            color: '#5470c6'
          },
          data: truesalary,
        }]
      };
      myChart.setOption(option);
    }


    // ***************************************************************** 地图 
    function mapChart(a, b) {
      let myChart = echarts.init($('.map')[0]);
      let chinaGeoCoordMap = {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        "吉林": [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        "辽宁": [123.1238, 42.1216],
        "河北": [114.4995, 38.1006],
        "天津": [117.4219, 39.4189],
        "山西": [112.3352, 37.9413],
        "陕西": [109.1162, 34.2004],
        "甘肃": [103.5901, 36.3043],
        "宁夏": [106.3586, 38.1775],
        "青海": [101.4038, 36.8207],
        "新疆": [87.9236, 43.5883],
        "西藏": [91.11, 29.97],
        "四川": [103.9526, 30.7617],
        "重庆": [108.384366, 30.439702],
        "山东": [117.1582, 36.8701],
        "河南": [113.4668, 34.6234],
        "江苏": [118.8062, 31.9208],
        "安徽": [117.29, 32.0581],
        "湖北": [114.3896, 30.6628],
        "浙江": [119.5313, 29.8773],
        "福建": [119.4543, 25.9222],
        "江西": [116.0046, 28.6633],
        "湖南": [113.0823, 28.2568],
        "贵州": [106.6992, 26.7682],
        "云南": [102.9199, 25.4663],
        "广东": [113.12244, 23.009505],
        "广西": [108.479, 23.1152],
        "海南": [110.3893, 19.8516],
        '上海': [121.4648, 31.2891]
      };
      let chinaDatas = [
        [{
          name: '黑龙江',
          value: 0
        }],
        [{
          name: '内蒙古',
          value: 0
        }],
        [{
          name: '吉林',
          value: 0
        }],
        [{
          name: '辽宁',
          value: 0
        }],
        [{
          name: '河北',
          value: 0
        }],
        [{
          name: '天津',
          value: 0
        }],
        [{
          name: '山西',
          value: 0
        }],
        [{
          name: '陕西',
          value: 0
        }],
        [{
          name: '甘肃',
          value: 0
        }],
        [{
          name: '宁夏',
          value: 0
        }],
        [{
          name: '青海',
          value: 0
        }],
        [{
          name: '新疆',
          value: 0
        }],
        [{
          name: '西藏',
          value: 0
        }],
        [{
          name: '四川',
          value: 0
        }],
        [{
          name: '重庆',
          value: 0
        }],
        [{
          name: '山东',
          value: 0
        }],
        [{
          name: '河南',
          value: 0
        }],
        [{
          name: '江苏',
          value: 0
        }],
        [{
          name: '安徽',
          value: 0
        }],
        [{
          name: '湖北',
          value: 0
        }],
        [{
          name: '浙江',
          value: 0
        }],
        [{
          name: '福建',
          value: 0
        }],
        [{
          name: '江西',
          value: 0
        }],
        [{
          name: '湖南',
          value: 0
        }],
        [{
          name: '贵州',
          value: 0
        }],
        [{
          name: '广西',
          value: 0
        }],
        [{
          name: '海南',
          value: 0
        }],
        [{
          name: '上海',
          value: 1
        }]
      ];

      let convertData = function(data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord = chinaGeoCoordMap[dataItem[0].name];
          let toCoord = [116.4551, 40.2539];
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            }, {
              coord: toCoord,
            }]);
          }
        }
        return res;
      };
      let series = [];
      [
        ['北京市', chinaDatas]
      ].forEach(function(item, i) {
        console.log(item)
        series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: convertData(item[1])
          }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function(params) { //圆环显示文字
                  return params.data.name;
                },
                fontSize: 13
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#f00'
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
              };
            }),
          },
          //被攻击点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                //offset:[5, 0],
                color: '#0f0',
                formatter: '{b}',
                textStyle: {
                  color: "#0f0"
                }
              },
              emphasis: {
                show: true,
                color: "#f60"
              }
            },
            symbol: 'pin',
            symbolSize: 50,
            data: [{
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            }],
          }
        );
      });

      let option = {
        // tooltip: {
        //   trigger: 'item',
        //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
        //   borderColor: '#FFFFCC',
        //   showDelay: 0,
        //   hideDelay: 0,
        //   enterable: true,
        //   transitionDuration: 0,
        //   extraCssText: 'z-index:100',
        //   formatter: function(params, ticket, callback) {
        //     //根据业务自己拓展要显示的内容
        //     let res = "";
        //     let name = params.name;
        //     let value = params.value[params.seriesIndex + 1];
        //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        //     return res;
        //   }
        // },
        backgroundColor: "#ffff",
        visualMap: { //图例值控制
          min: 0,
          max: 1,
          calculable: true,
          show: true,
          color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, //是否允许缩放
          itemStyle: {
            normal: {
              color: 'rgba(51, 69, 89, .5)', //地图背景色
              borderColor: '#516a89', //省市边界线00fcff 516a89
              borderWidth: 1
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)' //悬浮背景
            }
          }
        },
        series: series
      };
      myChart.setOption(option);
    }
    mapChart();
  </script>

</body>

</html>